<script setup lang="ts" name="User">
import editPage from "./edit.vue";
import detailPage from "./detail.vue";
import { DEFAULT_PASSWORD } from "./const";
import { delUserApi, listUserApi, resetUserPwdApi } from "@/api/system/user";
import { listDeptApi } from "@/api/system/dept";

const router = useRouter();

const { proxy } = getCurrentInstance();

const { sys_normal_disable, sys_user_sex } = useDict("sys_normal_disable", "sys_user_sex");

// 遮罩层
const loading = ref(false);

// 导出遮罩层
const exportLoading = ref(false);

// 搜索栏元素
const queryUserRef = ref(null);

// 表单Id
const id = ref(null);

// 选中数组
const selection = ref<UserRecord[]>([])

// 非单个禁用
const single = ref(true);

// 非多个禁用
const multiple = ref(true);

// 用户列表
const userList = ref<UserRecord[]>([]);

// 部门名称 搜索
const deptName = ref("");

// 部门选项
const deptList = ref<DeptRecord[]>();

// 弹出层标题
const title = ref("");

// 编辑弹出层
const openEdit = ref(false);

// 详情弹出层
const openDetail = ref(false);

//总条数
const total = ref(0);

// 列信息
const columns = ref<TableColumnsRecord>({
  colNo: { label: "序号", visible: true },
  userId: { label: "用户编号", visible: true },
  nickName: { label: "用户昵称", visible: true },
  userName: { label: "用户名称", visible: true },
  dept: { label: "部门", visible: true },
  email: { label: "邮箱", visible: true },
  sex: { label: "性别", visible: true },
  phonenumber: { label: "手机号码", visible: true },
  status: { label: "状态", visible: true },
  createTime: { label: "创建时间", visible: true },
})

// 查询参数
const queryParams = ref<UserRecord>({
  pageNum: 1,
  pageSize: 10,
  userId: null,
  userName: null,
  nickName: null,
  email: null,
  sex: null,
  phonenumber: null,
  status: null,
  createTime: null,
  admin: null,
  avatar: null,
  dept: null,
  deptId: null,
  loginDate: null,
  postIds: null,
  roleId: null,
  roleIds: null,
  roles: null,
  remark: null,
});


/** 查询用户列表 */
function getList() {
  loading.value = true;
  listUserApi(queryParams.value).then(response => {
    userList.value = response.rows;
    total.value = response.total;
    loading.value = false;
    userList.value.forEach((item, index) => {
      item['colNo'] = sequenceNo(index, queryParams.value);
    })
  });
}

/** 查询部门下拉树结构 */
function getDeptTree() {
  listDeptApi().then(response => {
    deptList.value = handleTree(response.data, "deptId");
  })
}

/** 通过条件过滤节点  */
const filterNode = (value: string, data: DeptRecord) => {
  if (!value) return true;
  return data.deptName.indexOf(value) !== -1;
};

/** 根据名称筛选部门树 */
watch(deptName, val => {
  proxy.$refs["deptTreeRef"].filter(val);
});

/** 节点单击事件 */
function handleNodeClick(data) {
  queryParams.value.deptId = data.deptId;
  handleQuery();
};


/** 关闭弹窗 */
function closeDialog(refresh: boolean) {
  if (refresh) {
    getList();
  }
  openEdit.value = false;
  openDetail.value = false;
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryUserRef.value.resetFields()
  handleQuery();
}

/** 多选框选中数据 */
function handleSelectionChange(selectionList: UserRecord[]) {
  selection.value = selectionList;
  single.value = selectionList.length !== 1;
  multiple.value = !selectionList.length;
}

/** 新增按钮操作 */
function handleAdd() {
  id.value = '';
  openEdit.value = true;
  title.value = "新增用户";
}

/** 修改按钮操作 */
function handleUpdate(row: UserRecord) {
  id.value = row.userId || selection.value.map(item => item.userId);
  openEdit.value = true;
  title.value = "修改用户";
}

/** 详情按钮操作 */
function handleDetails(row: UserRecord) {
  id.value = row.userId;
  openDetail.value = true;
  title.value = "用户详情";
}

/** 重置密码操作 */
function handleResetPwd(row: UserRecord) {
  proxy.$modal.confirm('是否重置用户昵称为"' + row.nickName + '"的密码?', "系统提示", {
    type: "warning",
  }).then(() => {
    return resetUserPwdApi({ userId: row.userId, password: DEFAULT_PASSWORD })
  }).then(() => {
    proxy.$modal.msgSuccess("重置密码成功， 默认密码为: " + DEFAULT_PASSWORD);
  })
}

/** 分配角色操作 */
function handleAuthRole(row: UserRecord) {
  router.push('/system/user/auth-role/' + row.userId);
}

/** 删除按钮操作 */
function handleDelete(row: UserRecord | any) {
  let ids = [];
  let colNos = [];
  if (row.userId) {
    ids = [row.userId];
    colNos = [row.colNo];
  } else {
    selection.value.forEach(item => {
      ids.push(item.userId);
      colNos.push(item.colNo);
    })
  }

  // @ts-ignore
  proxy.$modal.confirm('是否确认删除序号为"' + colNos + '"的数据项?', "系统提示", {
    type: "warning",
  }).then(() => {
    return delUserApi(ids);
  }).then(() => {
    getList();
    // @ts-ignore
    proxy.$modal.msgSuccess("删除成功");
  }).catch(err => {
    console.error(err)
  });
}

/** 导出操作按钮 */
function handleExport() {
  download('system/user/export', {
    ...queryParams.value
  }, `用户_${new Date().getTime()}.xlsx`)
}

getList();
getDeptTree();
</script>

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="5" :xs="24" class="col-left container">
        <div class="back-item">
          <div class="head-container">
            <el-input
                v-model="deptName"
                placeholder="请输入部门名称"
                clearable
                prefix-icon="Search"
                style="margin-bottom: 20px"
            />
          </div>
          <div class="head-container">
            <el-tree
                :data="deptList"
                :props="{ label: 'deptName', children: 'children' }"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="deptTreeRef"
                node-key="id"
                highlight-current
                default-expand-all
                @node-click="handleNodeClick"
            />
          </div>
          <div class="line-magin" />
        </div>
      </el-col>
      <el-col :span="19" :xs="24" class="col-right container" id="table-container">
        <div class="back-item">
          <el-form :model="queryParams" ref="queryUserRef" :inline="true" label-width="68px">
            <el-form-item label="用户名称" prop="userName">
              <el-input
                  v-model="queryParams.userName"
                  placeholder="请输入用户名称"
                  clearable
                  @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input
                  v-model="queryParams.phonenumber"
                  placeholder="请输入手机号码"
                  clearable
                  @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select
                  v-model="queryParams.status"
                  placeholder="请选择状态"
                  clearable
                  @keyup.enter.native="handleQuery"
              >
                <el-option
                    v-for="(item, index) in sys_normal_disable"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间" prop="createTime">
              <el-date-picker
                  v-model="queryParams.createTime"
                  type="datetime"
                  placeholder="选择创建时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  clearable
                  @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item class="item-search">
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button type="warning" icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <div class="table-top mb8">
            <div class="title title-left">
              用户列表
            </div>
            <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleAdd"
                v-has-permi="['system:user:add']"
            >新增
            </el-button>
            <el-button
                type="danger"
                plain
                icon="Delete"
                :disabled="multiple"
                @click="handleDelete"
                v-has-permi="['system:user:remove']"
            >删除
            </el-button>
            <el-button
                type="warning"
                plain
                icon="Download"
                :loading="exportLoading"
                @click="handleExport"
                v-has-permi="['system:user:export']"
            >导出
            </el-button>
            <span class="table-top-line" />
            <right-toolbar @queryTable="getList" :columns="columns" />
          </div>
          <div>
            <el-table
                v-loading="loading"
                :data="userList"
                stripe
                v-tablesticky="{ parentId: 'table-container' }"
                @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="序号" align="center" width="55" prop="colNo" v-if="columns.colNo.visible" />
              <el-table-column label="用户编号" prop="userId" align="center" v-if="columns.userId.visible" />
              <el-table-column label="用户昵称" prop="nickName" align="center" min-width="120"
                               v-if="columns.nickName.visible" />
              <el-table-column label="用户名称" prop="userName" align="center" min-width="120"
                               v-if="columns.userName.visible" />
              <el-table-column label="部门" prop="dept.deptName" align="center" v-if="columns.dept.visible" />
              <el-table-column label="邮箱" prop="email" align="center" min-width="120" v-if="columns.email.visible" />
              <el-table-column label="性别" prop="sex" align="center" v-if="columns.sex.visible">
                <template #default="scope">
                  <dict-tag :options="sys_user_sex" :value="scope.row.sex" />
                </template>
              </el-table-column>
              <el-table-column label="手机号码" prop="phonenumber" align="center" min-width="120"
                               v-if="columns.phonenumber.visible" />
              <el-table-column label="状态" prop="status" align="center" v-if="columns.status.visible">
                <template #default="scope">
                  <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
                </template>
              </el-table-column>
              <el-table-column label="创建时间" prop="createTime" align="center" min-width="160"
                               v-if="columns.createTime.visible" />
              <el-table-column
                  label="操作"
                  align="center"
                  fixed="right"
                  min-width="180"
              >
                <template #default="scope">
                  <el-tooltip content="修改" placement="top" v-if="!scope.row.admin">
                    <el-button
                        link
                        type="primary"
                        icon="Edit"
                        @click="handleUpdate(scope.row)"
                        v-has-permi="['system:user:edit']"
                    />
                  </el-tooltip>
                  <el-tooltip content="详情" placement="top">
                    <el-button
                        link
                        type="primary"
                        icon="Document"
                        @click="handleDetails(scope.row)"
                        v-has-permi="['system:user:query']"
                    />
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top" v-if="!scope.row.admin">
                    <el-button
                        link
                        type="primary"
                        icon="Delete"
                        @click="handleDelete(scope.row)"
                        class="text-danger"
                        v-has-permi="['system:user:remove']"
                    />
                  </el-tooltip>
                  <el-tooltip content="重置密码" placement="top" v-if="!scope.row.admin">
                    <el-button
                        link
                        type="primary"
                        icon="Key"
                        @click="handleResetPwd(scope.row)"
                        v-hasPermi="['system:user:resetPwd']"
                    />
                  </el-tooltip>
                  <el-tooltip content="分配角色" placement="top" v-if="!scope.row.admin">
                    <el-button
                        link
                        type="primary"
                        icon="CircleCheck"
                        @click="handleAuthRole(scope.row)"
                        v-hasPermi="['system:user:edit']"
                    />
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <pagination
                :total="total"
                open-fixed
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
            />
            <div class="line-magin" />
          </div>

        </div>
      </el-col>
    </el-row>

    <!-- 添加或修改用户对话框 -->
    <edit-page v-if="openEdit" :id="id" :title="title" @closeDialog="closeDialog" />
    <detail-page v-if="openDetail" :id="id" :title="title" @closeDialog="closeDialog" />
  </div>
</template>

<style lang="scss" scoped>
.app-container {
}

.el-row {
}

.col-left {
  min-width: 240px;
}

.col-right {
  flex: 1;
  width: calc(100% - 240px);
}

.back-item {
  overflow: auto;

}

</style>